<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>操作日志</span>
      </div>
      <el-form :inline="true"
               class="demo-form-inline">
        <el-form-item label="操作人名称">
          <el-input v-model="name"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="startTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-button type="default"
                   @click="reset">取消</el-button>
        <el-button type="primary"
                   size="small"
                   @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData"
                height="calc(100vh - 350px)"
                border
                stripe
                style="width: 100%;margin-bottom:10px;">
        <el-table-column prop="id"
                         label="序号"></el-table-column>
        <el-table-column prop="name"
                         label="操作人"></el-table-column>
        <!-- <el-table-column label="历史操作">
          <template slot-scope="scope">{{scope.row.beforeData|getTime}}</template>
        </el-table-column> -->
        <el-table-column label="时间">
          <template slot-scope="scope">{{scope.row.createAt|getTime}}</template>
        </el-table-column>
        <el-table-column label="操作"
                         prop="operating">
        </el-table-column>

      </el-table>
      <el-pagination v-if="totalPage>1"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="page"
                     :page-sizes="[50, 100, 150, 200]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="totalPage"
                     style="float: right;"></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getList } from '@/api/system'
export default {
  name: 'Profile',
  data () {
    return {
      tableData: [],
      pageSize: 50,
      totalPage: 1,
      page: 1,
      name: '',
      startTime: '',
      endTime: '',
      activeTab: 'activity'
    }
  },
  filters: {
    getTime (timestamp) {
      var time = new Date(timestamp);
      var y = time.getFullYear(); //getFullYear方法以四位数字返回年份
      var M = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一
      M = m < 10 ? "0" + M : M;
      var d = time.getDate(); // getDate方法从 Date 对象返回一个月中的某一天 (1 ~ 31)
      d = d < 10 ? "0" + d : d;
      var h = time.getHours(); // getHours方法返回 Date 对象的小时 (0 ~ 23)
      h = h < 10 ? "0" + h : h;
      var m = time.getMinutes(); // getMinutes方法返回 Date 对象的分钟 (0 ~ 59)
      m = m < 10 ? "0" + m : m;
      var s = time.getSeconds(); // getSeconds方法返回 Date 对象的秒数 (0 ~ 59)
      s = s < 10 ? "0" + s : s;
      return y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
    }
  },
  computed: {
    ...mapGetters([
      'avatar',
      'roles'
    ])
  },
  created () {
    this.getData()
  },
  methods: {
    reset () {
      this.name = '';
      this.startTime = '';
      this.endTime = "";
      this.getData();
    },
    getData () {
      getList(this.name, this.startTime, this.endTime, this.page, this.pageSize, 1).then(res => {
        this.tableData = res.data;
        this.totalPage = res.recordsFiltered;

      })
    },
    handleSearch () {
      this.getData();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.getData();

    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData();
    }
  }
}
</script>
